<template>
    <div>
        <Card class="wrap" :bordered="false" :dis-hover="true">
            <Form :model="search" :label-width="80">
                <div class="table-top-wrap">
                    <div>
                        <div>
                            <Button @click="exportExcel" style="background:#009688;color:#fff;margin-right:30px">导出 Execl</Button>
                            <Button @click="handlePrint" style="background:#009688;color:#fff">打印</Button>
                        </div>
                    </div>
                    <div class="table-top-wrap-bottom">
                        <div class="table-top-wrapper">
                            <Select v-model="search.ShopID" placeholder="请选择门店">
                                <Option v-for="item in shopList" :value="item.ID" :key="item.ID">{{ item.ShopName }}</Option>
                            </Select>
                        </div>
                        <div class="table-top-wrapper">
                            <DatePicker type="date" placeholder="预约时间" style="width: 200px" v-model="search.date"></DatePicker>
                        </div>
                        <div>
                            <Button icon="ios-search" @click="handleSearch" class="search-btn" style="background:#009688;color:#fff">搜索</Button>
                        </div>
                    </div>
                </div>
            </Form>
            <slot></slot>
            <Table :height="tableHeight" border :columns="columns" :data="list"></Table>
        </Card>
        <template>
            <div v-show="print">
                <drugsTable ref="drugsTable" :data="list"></drugsTable>
            </div>
        </template>
    </div>
</template>

<script>
// import { cyclicRouting, getdate } from '@/util'
// import { getModulePermission } from '@/api/user'
import drugsTable from './drugsTable.vue'
import XLSX from 'xlsx'
import {
    GetStockWithMonth,
    shopData,
} from './service'
import moment from 'moment'
export default {
    name: 'FinancialReport',
    components: {
        drugsTable
    },
    data() {
        return {
            loading: false,
            search: {
                ShopID:'',
                date: ''
            }, //查询条件
            shopList: [], //门店列表
            list: [],
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '药品名称',
                    width: 150,
                    key: 'ProName',
                    align: 'center'
                },
                {
                    title: '规格',
                    width: 150,
                    key: 'Spec',
                    align: 'center'
                },
                {
                    title: '单位',
                    width: 150,
                    key: 'Unit',
                    align: 'center'
                },
                {
                    title: '上月数量',
                    key: 'BusinessName',
                    align: 'center',
                    children:[
                          {
                                title: '数量',
                                key: 'MMonthStockCount',
                                 align: 'center',
  
                            },{
                                title: '单价',
                                key: 'MMonthStockCost',
                                 align: 'center',
  
                            },{
                                title: '金额',
                                key: 'MMonthStockAllCost',
                                 align: 'center',
  
                            },
                    ]
                },

                {
                    title: '本月入库',
                    width: 150,
                    key: 'BookDate',
                    align: 'center',
                    children:[
                          {
                                title: '数量',
                                key: 'IMonthStockCount',
                                align: 'center',
  
                            },{
                                title: '单价',
                                key: 'IMonthStockCost',
                                align: 'center',
  
                            },{
                                title: '金额',
                                key: 'IMonthStockAllCost',
                                align: 'center',
  
                            },
                    ]
                },
                
                {
                    title: '本月出库',
                    width: 100,
                    key: 'InFrom',
                    align: 'center',
                    children:[
                          {
                                title: '数量',
                                key: 'OMonthStockCount',
                                align: 'center',
  
                            },{
                                title: '单价',
                                key: 'OMonthStockCost',
                                align: 'center',
  
                            },{
                                title: '金额',
                                key: 'OMonthStockAllCost',
                                align: 'center',
  
                            },
                    ]
                },
                                {
                    title: '本月结余',
                    width: 80,
                    key: 'State',
                    align: 'center',
                    children:[
                          {
                                title: '数量',
                                key: 'NMonthStockCount',
                                align: 'center',
  
                            },{
                                title: '单价',
                                key: 'NMonthStockCost',
                                align: 'center',
  
                            },{
                                title: '金额',
                                key: 'NMonthStockAllCost',
                                align: 'center',
                            },
                    ]
                },  
            ],
            print:false
        }
    },
    computed: {
        tableHeight() {
            // if (this.height) {
            //     return this.height
            // } else {
            return window.innerHeight - 240
            // }
        }
    },
    mounted() {
        this.shopData()
        
    },

    methods: {
        exportExcel() {
            var aoa = [
          
                [
                    "药品名称",
                    "规格",
                    "单位",
                    "上月数量",
                    "",
                    "",
                    "本月入库",
                    "",
                    "", 
                    "本月出库",
                    "",
                    "", 
                     "本月结余",
                    "",
                    "",     
                ],
                [
                    "",
                    "",
                    "",
                    "数量",
                    "单价",
                    "金额",
                    "数量",
                    "单价",
                    "金额",
                    "数量",
                    "单价",
                    "金额",
                    "数量",
                    "单价",
                    "金额",
                ]
            ]

                this.list.forEach(e=>{
                    aoa.push([
                        e.ProName,
                        e.Spec,
                        e.Unit,
                        e.MMonthStockCount,
                        e.MMonthStockCost,
                        e.MMonthStockAllCost,
                        e.IMonthStockCount,
                        e.IMonthStockCost,
                        e.IMonthStockAllCost,
                        e.OMonthStockCount,
                        e.OMonthStockCost,
                        e.OMonthStockAllCost,
                        e.NMonthStockCount,
                        e.NMonthStockCost,
                        e.NMonthStockAllCost,
                    ])
  
                })
                
     

            var sheet = XLSX.utils.aoa_to_sheet(aoa)
         sheet['!merges'] = [
                { e: { r: 0, c: 3 }, s: { r: 0, c: 5 } },
                { e: { r: 0, c: 6 }, s: { r: 0, c: 8 } },
                { e: { r: 0, c: 9 }, s: { r: 0, c: 11 } },
                { e: { r: 0, c: 12 }, s: { r: 0, c:14 } },
            ]
      
      
            sheet['!cols'] = [
                {
                    wpx: 300
                },
                {
                    wpx: 300
                },
                {
                    wpx: 50
                },
                {
                    wpx: 50
                },
                {
                    wpx: 50
                },
                {
                    wpx: 50
                },
                {
                    wpx: 50
                },
                {
                    wpx: 50
                },
                {
                    wpx: 50
                },
                {
                    wpx: 50
                },
                {
                    wpx: 50
                },
                {
                    wpx: 50
                },
                {
                    wpx: 50
                },
                {
                    wpx: 50
                },
                {
                    wpx: 50
                }
            ] //单元格列宽
            this.openDownloadDialog(this.sheet2blob(sheet), '月度库存统计.xlsx')
        },
        openDownloadDialog(url, saveName) {
            if (typeof url == 'object' && url instanceof Blob) {
                url = URL.createObjectURL(url) // 创建blob地址
            }
            var aLink = document.createElement('a')
            aLink.href = url
            aLink.download = saveName || '' // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
            var event
            if (window.MouseEvent) event = new MouseEvent('click')
            else {
                event = document.createEvent('MouseEvents')
                event.initMouseEvent(
                    'click',
                    true,
                    false,
                    window,
                    0,
                    0,
                    0,
                    0,
                    0,
                    false,
                    false,
                    false,
                    false,
                    0,
                    null
                )
            }
            aLink.dispatchEvent(event)
        },
        sheet2blob(sheet, sheetName) {
            sheetName = sheetName || 'sheet1'
            var workbook = {
                SheetNames: [sheetName],
                Sheets: {}
            }
            workbook.Sheets[sheetName] = sheet
            // 生成excel的配置项
            var wopts = {
                bookType: 'xlsx', // 要生成的文件类型
                bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
                type: 'binary'
            }
            var wbout = XLSX.write(workbook, wopts)
            var blob = new Blob([s2ab(wbout)], {
                type: 'application/octet-stream'
            })
            // 字符串转ArrayBuffer
            function s2ab(s) {
                var buf = new ArrayBuffer(s.length)
                var view = new Uint8Array(buf)
                for (var i = 0; i != s.length; ++i)
                    view[i] = s.charCodeAt(i) & 0xff
                return buf
            }
            return blob
        },
        
        // 获取门店列表
        async shopData() {
            let res = await shopData()
            this.shopList = res.data.rows
        },
        // 搜索
        handleSearch() {
            this.GetStockWithMonth()
        },
        async GetStockWithMonth(){
            let params = {
                Times:moment(this.search.date).format(
                            'YYYY-MM-DD'
                        ),
                ShopID:this.search.ShopID,
                
            }
            console.log(params)
            let res = await GetStockWithMonth(params)
            console.log(res)
            if(res.state === 'success'){
                this.list = res.data
            }
        },
        handlePrint() {
            // 打印
            // this.list = this.tableData
            // this.isdrugsTable = true
            // setTimeout(() => {
            this.$print(this.$refs.drugsTable) // 使用
            // this.isdrugsTable = false
            // }, 1000)
        },
      
       p(){
           promise.all([
               a,b
           ]).then(
               
           )
       }

    }
}
</script>

<style lang="less" scoped>
.datestyle {
    background-color: #f39800;
    color: #ffffff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
}
.modalList {
    li {
        margin: 20px;
        span {
            display: inline-block;
            margin: 0 10px;
        }
    }
}
.table-top-wrapper {
    margin-left: 10px;
}
.is-selected {
    color: #1989fa;
}
.wrap {
    padding-bottom: 10px;
}
.page-wrap {
    position: fixed;
    bottom: 25px;
    left: 230px;
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
.page-wrap-total {
    border-radius: 3px;
    padding: 0 10px;
    height: 32px;
    line-height: 32px;
    margin: 0 20px;
    border: 1px solid #dcdee2;
    font-size: 12px;
}
.search-con {
    padding: 10px 0;
    .search {
        &-col {
            display: inline-block;
            width: 200px;
        }
        &-input {
            display: inline-block;
            width: 200px;
            margin-left: 2px;
        }
        &-btn {
            margin-left: 2px;
        }
    }
}
.list-btn {
    margin: 0 5px;
}
.delete-btn {
    background: #fc8675;
    border: none;
}
.edit-btn {
    background: #5ab1ef;
    border: none;
}
</style>